<template>
  <div class="requests-container">
    <div class="requests-header">
      <h2 class="header-title">好友申请</h2>
      <div class="request-count" v-if="requests.length > 0">
        <span class="count-badge">{{ requests.length }}</span>
        <span class="count-text">个申请</span>
      </div>
    </div>

    <div v-if="requests.length === 0" class="empty-state">
      <div class="empty-icon">📭</div>
      <div class="empty-text">暂无好友申请</div>
      <div class="empty-subtitle">当有人向你发送好友申请时，会在这里显示</div>
    </div>

    <div v-else class="requests-list">
      <div v-for="request in requests" :key="request.id" class="request-item">
        <div class="user-info">
          <div class="user-avatar">
            <span class="avatar-text">{{ request.from_user?.avatar || '默' }}</span>
            <div class="request-badge">新</div>
          </div>
          <div class="user-details">
            <div class="user-name">{{ request.from_user?.name || '未知用户' }}</div>
            <div class="request-message">{{ request.message || '想和你成为好友' }}</div>
            <div class="request-time">{{ formatTime(request.created_at) }}</div>
          </div>
        </div>
        <div class="request-actions">
          <button @click="acceptRequest(request.id)" class="accept-btn">
            <span class="btn-icon">✅</span>
            接受
          </button>
          <button @click="rejectRequest(request.id)" class="reject-btn">
            <span class="btn-icon">❌</span>
            拒绝
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getFriendRequests, respondToFriendRequest } from '@/api/friends'
import { checkLoginStatus } from '@/utils/auth'

// 状态管理
const requests = ref([])
const loading = ref(false)

// 获取好友申请列表
const getRequests = async () => {
  try {
    loading.value = true
    const res = await getFriendRequests()
    requests.value = res.data || []
  } catch (error) {
    console.error('获取好友申请失败:', error)
    uni.showToast({ title: '获取好友申请失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 接受好友申请
const acceptRequest = async (requestId) => {
  try {
    await respondToFriendRequest(requestId, 'accepted')
    uni.showToast({ title: '已接受好友申请', icon: 'success' })
    // 刷新申请列表
    getRequests()
  } catch (error) {
    console.error('接受好友申请失败:', error)
    uni.showToast({ title: '操作失败，请重试', icon: 'none' })
  }
}

// 拒绝好友申请
const rejectRequest = async (requestId) => {
  try {
    await respondToFriendRequest(requestId, 'rejected')
    uni.showToast({ title: '已拒绝好友申请', icon: 'success' })
    // 刷新申请列表
    getRequests()
  } catch (error) {
    console.error('拒绝好友申请失败:', error)
    uni.showToast({ title: '操作失败，请重试', icon: 'none' })
  }
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now - date
  
  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 1天内
    return `${Math.floor(diff / 3600000)}小时前`
  } else {
    return date.toLocaleDateString()
  }
}

// 组件挂载时
onMounted(() => {
  if (!checkLoginStatus()) {
    uni.navigateTo({ url: '/pages/login/login' })
    return
  }

  getRequests()
})
</script>

<style src="./requests.css"></style> 